<template >
  <Layout :showHome="true" :showH="false">
    <!-- <button @click="users">获取接口</button> -->
    <van-nav-bar
      title="个人钱包"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="money">
      <p>账户余额+</p>
        <h4>￥{{ money }}</h4>
    </div>
    <div class="cz">
      <van-button
        type="primary"
        @click="getMoney"
        >提现</van-button
      >
    </div>
    <van-overlay :show="mask" @click="maskEvt">
      <div class="wrapper" @click.stop>
        <van-field
          readonly
          clickable
          :value="value"
          @touchstart.native.stop="show = true"
          placeholder="输入您的提现金额"
        />
        <van-number-keyboard
          v-model="value"
          :show="show"
          :maxlength="6"
          @blur="show = false"
        />

        <div class="block">
          <span @click="mask = false">X</span>
          <p>当前最多可提现 ￥{{ money }}</p>
          <button @click="outMoney">确认</button>
        </div>
      </div>
    </van-overlay>
    <div class="record">提现记录</div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @scroll="scrollEvt"
      >
        <van-cell-group>
          <van-cell v-for="item in list" :key="item.id" :title=" '￥' +Number(item.cash).toFixed(2)" :value="item.time" />
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
  </Layout>
</template>
<script>
import { editDrawApi, usersApi } from "@/apis/myApi";
import { taskApi } from "@/apis/myApi";
import { editMoneyApi } from "@/apis/myApi";
export default {
  data() {
    return {
      money: "",
      newMoney: "",
      userId: "",
      show: false,
      value: "",
      // 遮罩层
      mask: false,
      list: [],
      // 记载中
      loading: false,
      // 没有更多数据
      finished: false,
      refreshing: false,
      page: 1,
      offset: "",
      // 图片
      img: "",
      newTime: "",
      NewDraw: [],
      obj: {},
      newTime: "",
      active: '',
      sign: ''
    };
  },
  created() {
    this.users();
  },
  mounted() {},
  methods: {
    // 用户余额渲染接口
    async users() {
      this.userId = this.$store.getters["common/userId"];
      let result = await usersApi(this.userId);
      this.active = result.active
      this.sign = result.sign
      this.money = Number(result.money).toFixed(2);
      this.list = result.withdrawal.reverse();
    },
    // 头部跳转
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击事件遮罩层
    maskEvt() {
      this.mask = false;
    },
    onLoad() {
      if (this.refreshing) return;
      // console.log(this.list.price);
      // 下拉刷新
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        /* for (let i = 0; i < 1; i++) {
          this.list.push(this.list.length + 1);
        } */
        this.loading = false;
        if (this.list.length >= 1) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = false;
      this.onLoad();
    },
    load(evt) {
      // 实现一个加载节流的方法
      // 如果没有到底部不能加载，如果正在加载中不能去加载，如果没有更多数据不能去加载
      console.log("----------");

      // if (this.loading) return;
      // if (!this.hasMore) return;
      // // 是否到底部 -- 预留20个像素
      let isBottom =
        evt.target.scrollHeight -
          evt.target.clientHeight -
          evt.target.scrollTop <
        32;
      console.log(isBottom);
      // if (isBottom) {
      //   // 修改加载状态
      //   this.loading = true;
      //   // 要去加载下一页数据
      //   this.page += 1;
      //   // 再去调用获取数据的方法
      //   this.getList();
      // }
    },
    async outMoney() {
      this.time();
      let objId = 0;
      if (this.money - this.value < 0) {
        this.$toast.fail("账号余额不足");
        return;
      }
      this.newMoney = Number(this.money) - Number(this.value);
      const res = await usersApi(this.userId);
      this.NewDraw = res.withdrawal;
      if (this.NewDraw.length === 0) {
        objId = 0;
      } else {
        objId = Number(this.NewDraw[this.NewDraw.length - 1].id);
      }
      this.obj = {
        id: objId + 1,
        cash: this.value,
        time: this.newTime,
      };
      this.NewDraw.push(this.obj);
      await editDrawApi(this.userId, this.NewDraw);
      await editMoneyApi(this.userId, this.newMoney);
      this.$dialog
        .alert({
          title: "提示",
          message: "提现成功",
        })
        .then(() => {
          location.reload();
        });
    },
    scrollEvt(evt) {
      console.log("----------");
      let isBottom =
        evt.target.scrollHeight -
          evt.target.clientHeight -
          evt.target.scrollTop <
        32;
      console.log(isBottom);
      // if (isBottom) {
    },
    // 时间方法
    time() {
      let time = new Date();
      let Y = time.getFullYear() + "-";
      let M =
        (time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1) + "-";
      let D =
        (time.getDate() < 10 ? "0" + time.getDate() : time.getDate()) + " ";

      let h =
        (time.getHours() < 10 ? "0" + time.getHours() : time.getHours()) + ":";
      let m =
        (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) +
        ":";
      let s =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      this.newTime = Y + M + D + h + m + s;
    },
    getMoney () {
      if (this.active === 2 && this.sign === 1) {
        this.mask = true
      } else {
        this.$toast.fail('清先完成注册流程')
        return false
      }
    }
  },
};
</script>

<style lang="less" scoped>
.van-cell {
  overflow-x: hidden;
}
// 提现记录
.record {
  text-align: center;
}

.cz {
  position: relative;
  top: -86px;
  left: 260px;
  .van-button {
    margin-right: 10px;
  }
}

// 个人钱包背景样式
.money {
  position: relative;
  margin: auto;
  padding-top: 20px;
  width: 90vw;
  height: 130px;
  background-color: #3d8cf7;
  text-align: center;
  line-height: 30px;
  color: #fff;
  > span {
    margin-left: -68px;
  }
  h4 {
    margin: 0;
  }
}
// 遮罩层样式
.wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  > .van-cell {
    position: fixed;
    top: 47%;
    left: 23%;
    width: 50%;
    border: 1px solid black;
  }
}

// 小键盘
.van-number-keyboard {
  margin-bottom: 35px;
}
.block {
  width: 80vw;
  margin: auto;
  height: 10rem;
  background-color: #fff;
  > button {
    position: fixed;
    top: 57%;
    left: 37%;
    color: #fff;
    width: 5rem;
    height: 2rem;
    border: 0;
    border-radius: 5rem;
    background-color: #3d8cf7;
  }
  > p {
    font-size: 0.7rem;
    position: fixed;
    top: 40%;
    left: 24%;
  }
  > span {
    float: right;
  }
  border-radius: 5px;
}
</style>